<template>
  <view class="hot-container">
    <!-- @ 符号相当于 当前项目的根目录 -->
    <image class="logo" src="@/static/images/logo.png" mode="aspectFit"></image>
    <!-- 可直接使用组件，无需注册 -->
    <view class="seacrh-box" @click="onToSearch">
      <my-search placeholderText="uni-app 自定义组件"></my-search>
    </view>
    <view class="tab-sticky">
      <my-tabs
        :tabData="tabData"
        :defaultIndex="currentIndex"
        :config="{ textColor: '#333' }"
        @tabClick="tabClick"
      ></my-tabs>
    </view>
    <!-- 让list具备左右切换的能力
        使用swiper对其进行改造
        问题1:list 列表的高度展示错误
        原因:没有为swiper指定高度
        解决方案:计算出每个item的高度，然后叠加到一起，就可以得到swiper的高度
        问题2：切换tab时，list的卡顿问题
        原因: swiper动画未完成是时，就获取数据，渲染DOm
        解决方案:swiper 动画完成之后，获取数据，渲染DOM
      完成list与tabs联动的能力
      1.tabs切换时，swiper联动切换
      2.swiper切换时，tabs联动切换
    -->
    <swiper
      class="swiper"
      :current="currentIndex"
      :style="{ height: currentSwiperHeight + 'px' }"
      @animationfinish="onSwiperEnd"
      @change="onSwiperChange"
    >
      <!-- swiperItemde的数量，需要有tabData进行决定 -->
      <swiper-item
        class="swiper-item"
        v-for="(tabItem, tabIndex) in tabData"
        :key="tabIndex"
      >
        <!-- list视图 -->
        <view>
          <!-- 加载动画 -->
          <uni-load-more status="loading" v-if="isLoading" />
          <block v-else>
            <hot-list-item
              :class="'hot-list-item-' + tabIndex"
              v-for="(item, index) in listData[tabIndex]"
              :key="index"
              :data="item"
              :ranking="index + 1"
              @click="onItemClick(item)"
            ></hot-list-item>
          </block>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getHotTabs, getHotListFromTabType } from "api/hot";
export default {
  data() {
    return {
      // tabs 数据源
      tabData: [],
      // 当前的切换 index
      currentIndex: 0,
      //list 列表数据加载的loading
      isLoading: true,
      //以index为key，以对应的list为value
      listData: {},
      // 当前swiper的高度
      currentSwiperHeight: 0,
      //缓存高度的计算结果，以index为key，以对应的高度为value
      swiperHeightData: {},
    };
  },
  created() {
    this.loadHotTabs();
  },
  methods: {
    async loadHotTabs() {
      const res = await getHotTabs();
      this.tabData = res.data.list;
      this.loadHotListFromTab();
    },
    //获取list列表
    async loadHotListFromTab() {
      // if (!this.listData[this.currentIndex]) {
      // 1.没有获取到数据
      // 1.1展示loading
      this.isLoading = true;
      //  1.2调用接口获取数据
      const id = this.tabData[this.currentIndex].id;
      const { data: res } = await getHotListFromTabType(id);
      // 1.3把数据保存到本地
      this.listData[this.currentIndex] = res.list;
      // 1.4隐藏loading
      this.isLoading = false;
      //渲染完成数据之后，计算高度
      setTimeout(async () => {
        //获取到当前swiper的高
        this.currentSwiperHeight = await this.getCurrenSwiperHeight();
        //放入缓存
        this.swiperHeightData[this.currentIndex] = this.currentSwiperHeight;
      }, 0);
      // }
      //2.已经获取到数据
    },
    tabClick(index) {
      this.currentIndex = index;
    },
    //swipercChange
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    // swiper动画完成
    onSwiperEnd() {
      if (!this.listData[this.currentIndex]) {
        this.loadHotListFromTab();
        return;
      }
      //未return，则证明存在数据缓存，存在数据缓存，则同时存在height的缓存数据
      this.currentSwiperHeight = this.swiperHeightData[this.currentIndex];
    },
    getCurrenSwiperHeight() {
      // 1.拿到所有的item
      //2.拿到所有item的高度
      // 3.把所有的高度累加
      return new Promise((resolve, reject) => {
        let sum = 0;
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll(`.hot-list-item-${this.currentIndex}`)
          .boundingClientRect((data) => {
            data.forEach((item) => {
              sum += item.height;
            });
            resolve(sum);
          })
          .exec();
      });
    },
    //跳转到search-blog
    onToSearch() {
      uni.navigateTo({ url: "/subpkg/pages/search-blog/search-blog" });
    },
    // 热搜列表item点击事件
    onItemClick(item){
      uni.navigateTo({ url: `/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item.id}` })
    }
  },
};
</script>

<style lang="scss" scoped>
.hot-container {
  background-color: $uni-bg-color;
  .logo {
    width: 100%;
    height: 80px;
  }
  .seacrh-box {
    padding: 0 16px;
    margin-bottom: $uni-spacing-col-base;
  }
}
</style>
